import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import './index.less';

import FootTabBar from 'COMPONENT/FootTabBar';
import CommonHeader from 'COMPONENT/CommonHeader';
import {Icon,Button,List, Checkbox, Flex,DatePicker} from 'antd-mobile'
import enUs from 'antd-mobile/lib/date-picker/locale/en_US';
import {Link} from 'react-router'

const Item = List.Item;
const nowTimeStamp = Date.now();
const now = new Date(nowTimeStamp);
const utcNow = new Date(now.getTime() + (now.getTimezoneOffset() * 60000));

let minDate = new Date(nowTimeStamp - 1e7);
const maxDate = new Date(nowTimeStamp + 1e7);
if (minDate.getDate() !== maxDate.getDate()) {
  minDate = new Date(maxDate.getFullYear(), maxDate.getMonth(), maxDate.getDate());
}

function formatDate(date) {
  const pad = n => n < 10 ? `0${n}` : n;
  const dateStr = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
  const timeStr = `${pad(date.getHours())}:${pad(date.getMinutes())}`;
  return `${dateStr} ${timeStr}`;
}

const CustomChildren = ({ extra, onClick, children }) => (
  <div
    onClick={onClick}
    style={{ backgroundColor: '#fff', height: '45px', lineHeight: '45px', padding: '0 15px' }}
  >
    {children}
    <span style={{ float: 'right', color: '#888' }}>{extra}</span>
  </div>
);






const CheckboxItem = Checkbox.CheckboxItem;
const AgreeItem = Checkbox.AgreeItem;

export default class Home extends React.Component {
  static contextTypes = {
    router: PropTypes.object.isRequired
  }
  constructor(props) {
    super(props);
    this.state = {
    date: now,
    dates: now,
    time: now,
    utcDate: utcNow,
    dpValue: null,
    customChildValue: null,
    visible: false,
  }

  }

  componentWillMount() {
    //获取token
    //
  }

  toAgreement=()=>{
    this.context.router.push({
        pathname: '/RentHouse/Payment'
      })

  }

  render() {
    let height = $(window).height()-50
    return(
        <div backgroundColor="#fcfcfc">
            <CommonHeader name='租期时间' leftContentTitle="@back"/>
            <div className='agreement' style={{paddingBottom:'1rem'}}>
                <div style={{borderTop:'1px solid #eee'}}>
                 <DatePicker
                    mode="date"
                    title="选择开始时间"
                    extra="Optional"
                    value={this.state.date}
                    onChange={date => this.setState({ date })}
                  >
                    <Item arrow="horizontal">开始时间</Item>
                  </DatePicker>

                </div>
                <p>*开始时间只能大于当天</p>
                <div style={{borderTop:'1px solid #eee'}}>
                 <DatePicker
                    mode="date"
                    title="选择结束时间"
                    extra="Optional"
                    value={this.state.dates}
                    onChange={dates => this.setState({ dates })}
                  >
                    <Item arrow="horizontal">结束时间</Item>
                  </DatePicker>
                </div>
                {/*<div style={{borderBottom:'1px solid #eee'}}>
                  <a>请确认付款方式</a>
                  <Icon type='right'/>
                  <select name="" id="">
                    <option value="1">请选择 </option>
                    <option value="1">日付 ￥79元/天 </option>
                    <option value="1">月付 ￥1460元/月 </option>
                    <option value="1">季付 ￥1390元/月 </option>
                    <option value="1">半年付 ￥1390元/月 </option>
                    <option value="1">年付 ￥1390元/月 </option>
                    <option value="1">xx分期付 ￥1390元/月 </option>
                  </select>
                </div>*/}
            </div>

            {/*<div className='confirmFoot' onClick={this.toAgreement.bind(this)}>下一步</div>*/}
            <div className="btnGroup-one-fixed">
                <Button type="primary" className="btnGroup-one-fixed-btn"
                        onClick={this.toAgreement.bind(this)}>下一步</Button>
            </div>

        </div>
    )
  }

}